<template>
  <div>
    <div class="img_top">
      <img width="100%" height="195.41px" src="../../static/img/page_classify.jpg" />
    </div>
    <div class="about">
      <div class="about_btn">
        <div class="about_mess1">网站首页</div>
        <div class="about_mess2">分类</div>
      </div>
      <P class="about_p">不要轻易放弃。学习成长的路上，我们长路漫漫，只因学无止境。</P>
    </div>
    <div class="about_end">
      <div class="end_left">
        <div class="block" style="margin-top:50px;">
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(sortNameLists, index) in sortNameLists"
              :key="index"
              @click.native="blogSortList(sortNameLists.uid)"
            >{{sortNameLists.sortName}}</el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class="end_right">
        <div class="block" v-for="(blogSort,index) in blogsorts" :key="index">
          <el-timeline v-infinite-scroll="load">
            <el-timeline-item :key="i" :timestamp="blogSort.updateTime" placement="top" >
              <el-card>
                <h4 @click="findBlogByUid(blogSort.uid)">{{blogSort.title}}</h4>
                <p>{{blogSort.author}} 提交于 {{blogSort.updateTime}}</p>
                <el-tag type="success">{{blogSort.sortName}}</el-tag>
                <!--<el-tag type="success">{{blogSort.isOriginal}}</el-tag>-->
                <el-tag class="elTag" v-if="blogSort.isOriginal==1" type="danger">原创</el-tag>
                <el-tag class="elTag" v-if="blogSort.isOriginal==0" type="info">转载</el-tag>
              </el-card>

            </el-timeline-item>
            <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2018/4/3 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/2" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2018/4/2 20:46</p>
              </el-card>
            </el-timeline-item> -->
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
export default {
  data() {
    return {
      reverse: true,
      activities: [
        {
          content: "后端开发"
        },
        {
          content: "技术新闻"
        },
        {
          content: "学习笔记"
        },
        {
          content: "软件推荐"
        },
        {
          content: "慢生活"
        },
        {
          content: "面试"
        },
        {
          content: "机器学习"
        }
      ],
      blogsorts:{},
      sortNameLists:{}
    };
  },
  methods:{
    findBlogByUid:function (uid) {
      this.$router.push('/bloginfo/'+uid);
    },
    //获取分类页面展示的方法
    blogSortList:function (blogSotrUid) {

      var sortList = this;
      axios.get('/api/sort/findBlogSortByBlogSortUid/'+blogSotrUid).then(function (res) {
        sortList.blogsorts=res.data;

      })
    },
    sortNameList:function () {
      //alert("aaaa");
      var sortName = this;
      axios.get('/api/sort/listSort').then(function (res) {
        sortName.sortNameLists=res.data;
      })

    }
  },
  created() {
    this.sortNameList();
    this.blogSortList("1ec7047fe5c672d7c756bf79405cd04b");
  }
};
</script>

<style>
.about {
  width: 80%;
  height: 60px;
  margin-left: 10%;
  background-color: #f6f6f6;
  border-bottom: 1px #000 solid;
}
.about_end {
  width: 80%;
  margin-left: 10%;
  height: 3500px;
  background-color: #f6f6f6;
}
.about_btn {
  position: absolute;
  left: 160px;
  top: 310px;
}
.about_p {
  float: right;
  margin-right: 30px;
  line-height: 40px;
}
.about_mess1 {
  width: 100px;
  height: 40px;
  background-color: #000000;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.about_mess2 {
  width: 100px;
  height: 40px;
  background-color: #3a6ab5;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.end_left {
  width: 230px;
  height: 380px;
  position: absolute;
  left: 159px;
}
.end_right {
  width: 970px;
  height: 1000px;
  position: absolute;
  right: 160px;
}
</style>
